<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!--就诊人信息-->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span @click='scene=0'>请选择就诊人信息</span>
          <el-button type="primary" :icon="User" @click="addUser">添加就诊人</el-button>
        </div>
      </template>
      <!--就诊人卡片信息-->
      <div class="visitors" v-if="scene == 0">
        <Visitor @click="changeIndex(index)"
                 class="item"
                 v-for="(item,index) in users"
                 :key="item.id"
                 :user="item"
                 :index="index"
                 @editPatient="editPatient"
                 :currentIndex="currentIndex"/>
      </div>
      <!--添加就诊人信息结构-->
      <div class="form" v-if="scene == 1">
        <!--就诊人表单弹框-->
        <PatientDialog @refreshPatient="getPatientList" :userParam="userParam"/>
      </div>
    </el-card>
    <!--医生信息-->
    <el-card class="doctor-card">
      <template #header>
        <div class="doctor-top">
          <span>挂号信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template #label>
            就诊日期：
          </template>
          {{doctor?.workDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            就诊医院：
          </template>
          {{doctor?.param.hosname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            就诊科室：
          </template>
          {{doctor?.param.depname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            医生姓名：
          </template>
          {{doctor?.docname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            医生职称：
          </template>
          {{doctor?.title}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            医生专长：
          </template>
          {{doctor?.skill}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            医生服务费：
          </template>
          {{doctor?.amount}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="btn">
      <el-button type="primary" :disabled="currentIndex < 0" @click="submitPatient">确认挂号</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {User} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {reqDoctorInfo, reqGetUser} from "@/api/hospital";
import {AddOrUpdateUser, Doctor, UserData} from "@/api/hospital/type.ts";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {reqSubmitOrder} from "@/api/user";
import PatientDialog from "@/components/patient_dialog/index.vue";

const $route = useRoute()
const $router = useRouter()
//卡片展示内容 0 就诊人列表 1 添加就诊人
const scene = ref<number>(0)
//收集就诊人信息
const userParam = ref<AddOrUpdateUser>({
  id: "",
  name: "",
  certificatesType: "",
  certificatesNo: "",
  sex: 1,
  birthdate: "",
  phone: "",
  isMarry: 0,
  isInsure: 0,
  addressSelected: [],
  address: "",
  contactsName: "",
  contactsCertificatesType: "",
  contactsCertificatesNo: "",
  contactsPhone: "",
})


//就诊人列表
const users = ref<UserData[]>([])
//医生信息
const doctor = ref<Doctor>()
//就诊人索引
const currentIndex = ref<number>(-1);

onMounted(()=>{
  getPatientList()
  fetchDoctorInfo()
})
//查询当前用户下的就诊人信息
const getPatientList = async () => {
  const result = await reqGetUser()
  users.value = result.data
  scene.value = 0
}
const fetchDoctorInfo = async ()=>{
  const result = await reqDoctorInfo($route.query.docId as string)
  if(result.code === 200){
    doctor.value = result.data
  }
}
//添加就诊人回调
const addUser = ()=>{
  userParam.value = {
    id: "",
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: 1,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: "",
    contactsName: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
    contactsPhone: "",
  }
  scene.value = 1
}
// 显示编辑就诊人
const editPatient = (patient:AddOrUpdateUser)=>{
  scene.value = 1
  userParam.value = patient
}
const changeIndex = (index:number) => {
  currentIndex.value = index
}
//确认挂号回调
const submitPatient = async ()=>{
  const hoscode = doctor.value?.hoscode as string;
  const scheduleId = doctor.value?.id as string;
  const patientId = users.value[currentIndex.value].id
  const result = await reqSubmitOrder(hoscode,scheduleId,patientId)
  if(result.code === 200){
    $router.push({
      path: '/user/order',
      query:{
        orderId:result.data
      }
    })
  }else{
    ElMessage.error(result.message)
  }
}
</script>

<style scoped lang="scss">
.container{
  .tip{
    font-size: 20px;
    font-weight: bold;
    color: $gray1;
  }
  .box-card{
    margin: 10px 0;
    .card-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .visitors{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-gap: 20px 20px;
    }
  }

  .btn{
    margin: 20px 0;
    text-align: center;
  }
}
</style>
